<template>
  <div id="home">
    <el-container style="height: 100%">
      <el-aside width="250px">
        <userface :username="this.name" :myurl="this.url" />
        <Left />
      </el-aside>
      <el-container style="position: relative; z-index: 100">
        <el-header>
          <top
            :username="this.name"
            :myurl="this.url"
            :userinfo="this.userall"
          />
        </el-header>
        <el-main><Right /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from "./left/left";
import Right from "./right/right";
import top from "./top/top";
import userface from "./left/userface";
import { mapMutations, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      url:
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3155998395,3600507640&fm=26&gp=0.jpg",
      name: "用户么有名字",
      userall: "用户么有名字"
      // url:require("../assets/logo.png")
    };
  },
  computed: {
    ...mapState(["user"])
  },
  created() {
    (this.name = this.user.user.xingMing), (this.userall = this.user.user);
  },

  components: {
    top,
    Left,
    Right,
    userface
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #ededed;
  color: #333;
}
.el-container {
  min-width: 500px;
  height: 100%;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  padding: 200px 0 0;
  box-sizing: border-box;
}

.el-main {
  box-shadow: 0px 6px 3px #88888893 inset;
  background-color: #f0f0f0;
  color: #333;
  position: relative;
  z-index: 100;
}
.is-vertical {
  margin-left: 0px;
  transition: 0.5s;
}

#home {
  height: 100%;
}
</style>
